<!-- components/PaymentPopup.vue -->
<template>
	<uni-popup ref="popup" type="bottom" @change="popupChange">
		<view class="payment-container" :style="{ paddingBottom: paddingBottom +'px'  }">
			<!-- 标题栏 -->
			<view class="header">
				<text class="title">选择支付方式</text>
				<uni-icons type="closeempty" size="24" @click="closePopup"></uni-icons>
			</view>

			<!-- 支付方式列表 -->
			<scroll-view scroll-y class="payment-list">
				<view v-for="item in paymentList" :key="item.id" class="payment-item"
					:class="{ 'selected': selectedPayment === item.id }" @click="selectPayment(item)">
					<view class="item-left">
						<!-- <image :src="item.icon" class="payment-icon" /> -->
						<view :class="item.icon" class="payment-icon" :style="{color:item.id==1?'green':'red'}"></view>
						<view class="payment-info">
							<text class="payment-name">{{ item.name }}</text>
							<view class="flex justify-start align-center">
								<text v-if="item.desc" class="payment-desc">{{ item.desc }}</text>
								<text v-if="item.id == 2" class="payment-desc"
									style="color: red;">{{statInfo.balance}}</text>
							</view>
						</view>
					</view>
					<uni-icons v-if="selectedPayment === item.id" type="checkmarkempty" size="20" color="#007AFF" />
				</view>
			</scroll-view>

			<!-- 底部操作栏 -->
			<view class="footer">
				<button class="confirm-btn" @click="confirmPayment">
					确认支付 {{ selectedAmount ? `￥${selectedAmount}` : '' }}
				</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		incomeInfo
	} from "@/api/mine.js"
	export default {
		props: {
			// 支付金额（可选）
			amount: {
				type: [Number, String],
				default: ''
			},
			// 默认选中支付方式ID（可选）
			defaultPayment: {
				type: [Number, String],
				default: 1
			},
			// 距离底部安全高度
			paddingBottom: {
				type: [Number, String],
				default: 50
			}
		},

		data() {
			return {
				showPopup: false,
				selectedPayment: '',
				selectedAmount: '',
				statInfo: {},
				paymentList: [{
						id: 1,
						name: '微信支付',
						icon: 'cuIcon-weixin',
						desc: '推荐微信用户使用'
					},
					// {
					// 	id: 2,
					// 	name: '支付宝',
					// 	icon: '/static/payment/alipay.png',
					// 	desc: '支持花呗支付'
					// },
					// {
					// 	id: 2,
					// 	name: '佣金支付',
					// 	icon: 'cuIcon-recharge',
					// 	desc: '当前佣金：'
					// }
				]
			}
		},

		watch: {
			amount(newVal) {
				this.selectedAmount = newVal
			},
			defaultPayment(newVal) {
				this.selectedPayment = newVal
			}
		},

		mounted() {
			this.selectedAmount = this.amount
			this.selectedPayment = this.defaultPayment
			//获取佣金信息
			// incomeInfo().then(res => {
			// 	this.statInfo = res.data.data
			// })
		},

		methods: {
			openPopup() {
				this.$refs.popup.open()
			},

			closePopup() {
				this.$refs.popup.close()
			},

			popupChange(e) {
				this.showPopup = e.show
			},

			selectPayment(item) {
				this.selectedPayment = item.id
				this.$emit('update:defaultPayment', item.id)
			},

			confirmPayment() {
				if (!this.selectedPayment) {
					return uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
				}
				if (this.selectedPayment == 2 && this.amount > this.statInfo.balance) {
					return uni.showToast({
						title: '佣金不足',
						icon: 'none'
					})
				}
				const selected = this.paymentList.find(
					item => item.id === this.selectedPayment
				)

				this.$emit('confirm', {
					payment: selected,
					amount: this.selectedAmount
				})
				this.closePopup()
			}
		}
	}
</script>

<style scoped>
	.payment-container {
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		min-height: 400rpx;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.title {
		font-size: 36rpx;
		font-weight: 500;
	}

	.payment-list {
		max-height: 60vh;
	}

	.payment-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.item-left {
		display: flex;
		align-items: center;
	}

	.payment-icon {
		width: 80rpx;
		height: 80rpx;
		font-size: 60rpx;
		margin-right: 24rpx;
		border-radius: 12rpx;
	}

	.payment-info {
		display: flex;
		flex-direction: column;
	}

	.payment-name {
		font-size: 32rpx;
		color: #333;
	}

	.payment-desc {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.footer {
		padding: 32rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.confirm-btn {
		background: #007AFF;
		color: white;
		border-radius: 50rpx;
		font-size: 32rpx;
		line-height: 80rpx;
	}

	.confirm-btn:active {
		opacity: 0.8;
	}

	.selected {
		background-color: #f8faff;
	}
</style>